/*
  学习目标：jsx的注意点
  步骤：
     1. 必须要有一个根节点
     2. 必须要有闭合标签
     3. 关键字冲突，class-->className, for ---> htmlFor
*/
import React from 'react';
import ReactDOM from 'react-dom';

// 必须要有一个根节点,如果需要写多个dom，那么请用一个盒子包起来
// 👍可以使用 <></>   ,本质上就是 <React.Fragment> 的语法糖，与vue中 template 类似
const ulNode = (
  <>
    <ul>
      <li>橘子</li>
      <li>苹果</li>
      <li>香蕉</li>
    </ul>

    <ul>
      <li>橘子1</li>
      <li>苹果1</li>
      <li>香蕉1</li>
    </ul>
    {/* 必须要有闭合标签 */}
    <input type="text" id="box" />
    {/* 关键字冲突，class-->className, for ---> htmlFor */}
    <label htmlFor="box" className="test">
      点我等于点了 input
    </label>
  </>
);

ReactDOM.render(ulNode, document.getElementById('root'));
